<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/common/main.css}"/>
    <link rel="stylesheet" th:href="@{/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <title>cms-开源社区管理</title>
    <style>
        .long-text-center{
            text-align: center;
            font-size: larger;
        }
        li{
            margin-top: 10px;
        }
        .long-div{
            border-radius: 5px;
            border: 1px solid green;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 15px;
            box-shadow: 2px 2px 3px #888888;
        }
        span{
            margin-right: -100px;
        }
    </style>
</head>
<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i>费用管理</span>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">
        <div class="long-div long-text-center">
        <div class="layui-row" style="margin: 5px">
                <div class="layui-inline">
                    <span>楼号</span>
                    <input type="text" id="buildingNo" th:value="${costStatistic.buildingNo}" placeholder="  请输入楼号" autocomplete="off" class="layui-input-block">
                </div>
                <div class="layui-inline">
                    <span>房号</span>
                    <input type="text" id="roomNo" th:value="${costStatistic.roomNo}" placeholder="  请输入房号" autocomplete="off" class="layui-input-block">
                </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="test-range">
                        <div class="layui-input-inline">
                            <input type="text" id="startDate" class="layui-input" placeholder="开始日期" th:value="${costStatistic.startDate}">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" id="endDate" class="layui-input" placeholder="结束日期" th:value="${costStatistic.endDate}">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn statistic-search">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        </div>
        <div class="layui-row">
            <div class="layui-inline layui-col-md5 long-text-center long-div">
                <h3>物业费用统计</h3>
                <hr class="layui-border-green">
                <ul>
                    <li><span>应交物业费</span><input class="layui-input-block" th:value="${costStatistic.sum}"/></li>
                    <hr class="layui-border-green">
                    <li><span>已交物业费</span><input class="layui-input-block" th:value="${costStatistic.sumFeed}"/></li>
                    <hr class="layui-border-green">
                    <li><span>未交物业费</span><input class="layui-input-block" th:value="${costStatistic.sumNotFeed}"/></li>
                    <hr class="layui-border-green">
                </ul>
            </div>
            <div class="layui-inline layui-col-md5 long-text-center layui-col-md-offset2 long-div">
                <h3>停车费用统计</h3>
                <hr class="layui-border-green">
                <ul>
                    <li><span>应交停车费</span><input class="layui-input-block" th:value="${costStatistic.parkingFeeSum}"/></li>
                    <hr class="layui-border-green">
                    <li><span>已交停车费</span><input class="layui-input-block" th:value="${costStatistic.parkingFeedSum}"/></li>
                    <hr class="layui-border-green">
                    <li><span>未交停车费</span><input class="layui-input-block" th:value="${costStatistic.parkingNotFeedSum}"/></li>
                    <hr class="layui-border-green">
                </ul>
            </div>
        </div>
        <div class="layui-row long-div">
            <div class="layui-inline layui-col-md6" id="propertyFeeEcharts" style="height: 400px"></div>
            <div class="layui-inline layui-col-md6" id="parkingFeeEcharts" style="height: 400px"></div>
        </div>

    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/common/main.js}"></script>
<script th:src="@{/js/plugins/echarts.js}"></script>
<script>
    var laydate = layui.laydate;
    var $ = layui.jquery;
    let currentDate = getDate();
    laydate.render({
        elem: '#test-range' //开始时间和结束时间所在 input 框的父选择器
        //设置开始日期、日期日期的 input 选择器
        ,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
        ,max: currentDate //限定日期范围不超过当前系统日期
    });
    /* 搜索按钮监听 */
    $(document).on("click", ".statistic-search", function () {
        let buildingNo = $("#buildingNo").val()
        let roomNo = $("#roomNo").val()
        let startDate = $("#startDate").val()
        let endDate = $("#endDate").val()
        console.log(endDate)
        let getSearch = "buildingNo="+buildingNo+"&roomNo="+roomNo+"&startDate="+startDate+"&endDate="+endDate;
        getSearch = "?" + getSearch;
        window.location.href = window.location.pathname + getSearch;
    });

    function getDate() {
        var date = new Date();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '-';
        return currentDate;
    }
</script>
<script>
    var chartDom = document.getElementById('parkingFeeEcharts');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '停车费用饼状图',
            subtext: 'Fee Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: [[${costStatistic.parkingFeeSum}]], name: '总费用' },
                    { value: [[${costStatistic.parkingFeedSum}]], name: '已交费用' },
                    { value: [[${costStatistic.parkingNotFeedSum}]], name: '未交费用' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('propertyFeeEcharts');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '物业费用饼状图',
            subtext: 'Fee Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: [[${costStatistic.sum}]], name: '总费用' },
                    { value: [[${costStatistic.sumFeed}]], name: '已交费用' },
                    { value: [[${costStatistic.sumNotFeed}]], name: '未交费用' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>
</body>
</html>